<template>
    <div>
        <public-title title="员工队伍健康状况" themeType="dark">
            <template #right>
                <!--                <span class="right-text" @click="viewDetail">更多</span>-->
            </template>
        </public-title>
        <div class="inner">
            <div v-for="item in list" :key="item.label" class="health-item">
                <span>{{ item.label }}</span>
                <span>{{ item.value }}</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
    import { getTeamHealth } from '/@/views/yinChuan/yinChuan.api.ts';

    const props = defineProps({
        setting: Object,
    });
    const { setSession, getSession } = useSession();
    const { TEAM_HEALTH } = caching;
    const list = ref([
        {
            label: '在册总人数',
            value: '',
            key: 'total',
        },
        {
            label: '患重大疾病人数',
            value: '',
            key: 'bigIll',
        },
        {
            label: '健康高风险人数',
            value: '',
            key: 'highRisk',
        },
        {
            label: '患慢性病人数',
            value: '',
            key: 'slowIll',
        },
        {
            label: '健康指标异常人数',
            value: '',
            key: 'focusErr',
        },
        {
            label: '健康人数',
            value: '',
            key: 'health',
        },
    ]);

    function setList(data = {}) {
        list.value.forEach((item) => {
            const { key } = item;
            if (data && data.hasOwnProperty(key)) {
                item.value = data[key];
            }
        });
    }

    async function viewDetail() {
        try {
            const { code, result } = await getTeamHealth({ dataType: props.setting?.dataType });
            if (code != 200) {
                return;
            }
            setList(result);
            setSession(TEAM_HEALTH, result);
        } catch {
            let data = JSON.parse(getSession(TEAM_HEALTH));
            setList(data);
        }
    }

    onMounted(() => {
        viewDetail();
    });
</script>
<style scoped lang="less">
    .inner {
        height: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        padding: 0 10px;

        .right-text {
            font-weight: 100;
            cursor: pointer;
            margin-right: 3px;
        }

        .health-item {
            flex: 1;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
        }
    }
</style>
